<template>
  <view class="litigation-costs">
    <!-- 二级目录 -->
    <view class="cost-type">
      <view class="item" :class="{ active: item.isCount }" v-for="item in state.getSecondaryDirectoryList" :key="item.id"
        @click="selectType(item)">{{ item.title }}</view>
    </view>
    <!--计算器主体 -->
    <view class="calculator" v-if="state.iscalculator">
      <view class="display">
        <view class="table">
          {{ state.result.context }}
        </view>
      </view>
      <view class="condition">
        <view class="cell">
          <text class="label">类型</text>
          <view class="value">
            <calculator-select v-model="state.type" :localdata="state.getType" @change="typeChange"
              :clear="false"></calculator-select>
          </view>
        </view>
        <view class="cell" v-if="state.isCase">
          <text class="label">案件</text>
          <view class="value">
            <calculator-select v-model="state.Case" :localdata="state.getCase" @change="CaseChange"
              :clear="false"></calculator-select>
          </view>
        </view>
        <view class="cell" v-if="state.isMode">
          <text class="label">模式</text>
          <view class="value">
            <calculator-select v-model="state.Mode" :localdata="state.getMode" @change="ModeChange"
              :clear="false"></calculator-select>
          </view>
        </view>
        <view class="cell" v-if="state.isamount">
          <text class="label">涉及金额</text>
          <view class="amount">
            <view class="amount-input">
              <input type="digit" placeholder="请输入金额" v-model="state.amount" @input="inputAmount"
                :maxlength="state.moneyMaxLeng" class="input" />
            </view>
            <view class="unit">
              <calculator-select v-model="state.unit" :localdata="state.unitRange" :clear="false"></calculator-select>
            </view>
          </view>
        </view>
        <view class="calculate" @tap="calculate">计算</view>
      </view>
    </view>
    <view class="Expensecontent" v-if="state.isExpensecontent">
      {{ state.Expensecontent.context }}
    </view>
    <!-- 诉讼费用交纳方法 -->
    <view class="point">
      <view class="icon">!</view>
      <view class="text">
        <text>依据</text>
        <view class="file">
          <view @click="getLawsuitFile">
            《诉讼费用交纳办法》
            <!-- <button @click="getLawsuitFile"></button> -->
          </view>
        </view>
        <text>文件准确计算，结果供您参考。</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// @ts-nocheck
// import litigation from '@/api/litigation';
import { reactive, onMounted, nextTick, defineEmits, onBeforeMount } from 'vue';
import { commonExplainList, getType, getCase, getMode, getSecondaryDirectoryList, getContext, getCalculatorResults } from '@/api/litigation';
const state = reactive({
  //通用说明
  commonExplainList: [],
  //二级目录列表
  getSecondaryDirectoryList: [],
  // 其他费列表
  Expensecontent: '',
  //类型列表
  getType: [],
  //案件列表
  getCase: [],
  //模式列表
  getMode: [],
  //获取计算结果
  result: '',
  //涉及金额输入字数长短
  moneyMaxLeng: 8,
  //涉及金额输入框初始值
  amount: '',
  //诉讼费官方文档
  getDocument: "",
  //表单绑定数据
  type: "",
  Mode: "",
  Case: "",
  amount: "",
  arbitration: "",
  unit: 0,  //涉及金额初始单位
  //金额单位
  unitRange: [
    { id: 0, title: '元' },
    { id: 1, title: '万元' },
  ],
  //判断选项是否显示
  iscalculator: true,//计算机主体是否显示
  isExpensecontent: false,//其他费是否显示
  isCase: false,//案件
  isMode: false,//模式
  isamount: false,//涉及金额
});
//数据请求
onMounted(async () => {
  state.commonExplainList = await commonExplainList();
  state.getSecondaryDirectoryList = await getSecondaryDirectoryList();
  state.getType = await getType(state.getSecondaryDirectoryList[0].id);
  // console.log('selectType', state.getType);
  selectType(state.getType)
});
//二级目录选中功能
function selectType(item: any) {
  state.getSecondaryDirectoryList.forEach(async (child) => {
    child.isCount = false;
    if (child == item) {
      state.type = '';
      const date = await getType(child.id);
      if (date) {
        state.getType = date;
        state.iscalculator = true;
        state.isExpensecontent = false;
        state.result = '';
      } else {
        state.Expensecontent = await getContext(child.id);
        state.iscalculator = false;
        state.isExpensecontent = true;
      }
    }
  });
  item.isCount = true;
}
// 类型选项初始化
function initData() {
  state.getCase = "";//案件列表数据为空
  state.getMode = "";//模式列表数据为空
  state.Mode = "";//模式下拉框内容为空
  state.Case = "";//案件下拉框内容为空
  state.amount = "";//输入框内容为空
  state.isCase = false;//隐藏案件下拉框
  state.isMode = false;//隐藏模式下拉框
  state.isamount = false;//隐藏输入框
}
// 类型选完后发送请求案件数据
async function typeChange(item) {
  initData()
  if (item) {
    const date = await getCase(item);
    if (!date) {
      state.getCase = undefined;
      // 根据isCount判断是否需要涉及金额输入框
      state.getType.forEach((child) => {
        if (child.id == item) {
          state.isamount = child.isCount;
        }
      })
    } else {
      state.getCase = date;
      state.isCase = true;
    }
  }
}
//案件选完后发送请求模式数据
async function CaseChange(item) {
  state.getMode = "";
  state.Mode = "";
  state.amount = "";
  state.isamount = false;
  if (item) {
    const date = await getMode(item);
    if (!date) {
      state.getMode = undefined;
      state.isMode = false;
      state.getCase.forEach((child) => {
        if (child.id == item) {
          state.isamount = child.isCount;
        }
      })
    } else {
      state.getMode = date;
      state.isMode = true;
    }
  }
}
//模式选完后显示涉及金额输入框
function ModeChange(item) {
  if (item) {
    state.getMode.forEach((child) => {
      if (child.id == item) {
        state.isamount = child.isCount
      }
    })
  }
}

//点击计算按钮计算结果
function calculate() {
  const { type, Case, Mode, amount, unit, arbitration } = state;
  // 判断下拉框内是否有数据
  if (!type) {
    return uni.showToast({
      title: '请选择类型',
      icon: "none",
    });
  }
  // 判断下拉框是否隐藏 && 判断下拉框内是否有数据
  if (state.isCase && !Case) {
    return uni.showToast({
      title: '请选择案件',
      icon: "none",
    });
  }// 判断下拉框是否隐藏 && 判断下拉框内是否有数据
  if (state.isMode && !Mode) {
    return uni.showToast({
      title: '请选择模式',
      icon: "none",
    });
  }// 判断输入框是否隐藏 && 判断输入框内是否有数据 || 输入框内数据是否为0
  if (state.isamount && (!amount || amount == 0)) {
    return uni.showToast({
      title: '请输入涉及金额',
      icon: "none",
    });
  }
  const params = {
    id: arbitration,
    money: amount,
    unit: unit,
  };
  // 根据isCount的值判断接口
  async function get(child) {
    if (child.isCount) {
      state.result = await getCalculatorResults(params);
    } else {
      state.result = await getContext(params.id);
    }
  }
  if (state.getMode) {
    params.id = Mode
    state.getMode.forEach((child) => {
      if (child.id == Mode) {
        get(child);
      }
    })
  } else if (state.getCase) {
    params.id = Case
    state.getCase.forEach((child) => {
      if (child.id == Case) {
        get(child);
      }
    })
  }
  else if (state.getType) {
    params.id = type
    state.getType.forEach((child) => {
      if (child.id == type) {
        get(child);
      }
    })
  }
}
// 定义输入框内容规则
function inputAmount(e: any) {
  nextTick(() => {
    let val = e.target.value.toString();
    val = val.replace(/[^\d.]/g, ''); // 清除"数字"和"."以外的字符
    val = val.replace(/\.{2,}/g, '.'); // 只保留第一个. 清除多余的
    val = val.replace(/^0+\./g, '0.');
    val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, '')) : val;
    val = val.match(/^\d*(\.?\d{0,2})/g)[0] || '';

    if (val.includes('.')) {
      let numDian = val.toString().split('.')[1].length;
      if (numDian === 2) {
        state.moneyMaxLeng = val.length;
      }
    } else {
      state.moneyMaxLeng = 8;
    }
    state.amount = val;
  });
}
//获取诉讼费用交纳方法
function getLawsuitFile() {
  uni.downloadFile({
    url: 'http://192.168.0.123:8080/lawsuitCosts/getDocument.docx',
    success: ({ tempFilePath }) => {
      console.log('tempFilePath', tempFilePath);
      uni.openDocument({
        filePath: tempFilePath,
        fileType: 'docx',
        showMenu: true,
        success: () => {
          uni.showToast({
            title: '打开文档成功',
            icon: 'success',
            mask: true,
          });
        },
        fail: (error) => {
          console.log('error', error);
        },
      });
    },
    fail: (error) => {
      console.log('error', error);
    },
  });
}
</script>

<style lang="scss" scoped>
.litigation-costs {
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  color: #333;

  .cost-type {
    display: flex;
    align-items: center;
    width: 384rpx;
    height: 68rpx;
    border: 2rpx dashed #ccc;
    border-radius: 100px;
    padding: 0 2rpx;
    margin: 0 auto;

    .item {
      padding: 15rpx 16rpx;
    }

    .active {
      color: blue;
      background-color: #eff3fe;
      border-radius: 100px;
      font-weight: 500;
    }

    .padding {
      margin: 0 16rpx;
    }
  }

  .calculator {
    margin-top: 20rpx;
    margin: 20rpx 24rpx;
    padding: 20rpx;
    width: 702rpx;
    background: #bdd1fd;
    box-shadow: inset 8rpx 8rpx 8rpx 0rpx rgba(106, 136, 190, 0.1);
    border-radius: 20rpx;
    border: 2rpx solid rgba(81, 134, 208, 0.3);

    .display {
      min-height: 196rpx;
      background: #dfe9ff;
      box-shadow: inset 4rpx 8rpx 8rpx 0rpx rgba(106, 136, 190, 0.2), inset -8rpx -8rpx 8rpx 0rpx rgba(255, 255, 255, 0.5);
      border-radius: 20rpx;
      border: 2rpx solid;
      border-image: linear-gradient(180deg, rgba(81, 134, 208, 0.1), rgba(91, 139, 250, 0.2)) 2 2;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 40rpx;

      .table {
        color: red;
        font-size: 60rpx;
        text-align: right;
      }
    }

    .condition {
      margin-top: 20rpx;
      padding: 20rpx;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 20rpx;

      .cell {
        height: 80rpx;
        display: flex;
        justify-content: space-between;

        .label {
          width: 124rpx;
          padding: 0 8rpx;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 10rpx;
          border: 0rpx solid #f3f5f8;
          color: #5186d0;
          font-size: 26rpx;
          font-weight: 500;
          line-height: 80rpx;
          text-align-last: justify;
        }

        .value {
          width: 480rpx;
          height: 80rpx;
          background: #fff;
          border-radius: 10rpx;
          border: 0rpx solid #5186d0;

          :deep(.uni-select) {
            height: 80rpx !important;
            border: none;
            padding: 0 20rpx;
          }
        }

        .amount {
          width: 480rpx;
          display: flex;

          .amount-input {
            flex: 1;
            background-color: #fff;
            border-radius: 10rpx;
            margin-right: 20rpx;

            .input {
              display: flex;
              width: 100%;
              height: 80rpx;
              padding: 0 20rpx;
            }
          }

          .unit {
            background-color: #fff;
            width: 160rpx;
            border-radius: 10rpx;
          }

          :deep(.uni-select) {
            width: 160rpx;
            height: 80rpx !important;
            border: none;
            padding: 0 20rpx;
          }
        }

        &:not(:first-child) {
          margin-top: 20rpx;
        }
      }

      .calculate {
        margin-top: 20rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        background: #9db9fc;
        color: #fff;
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(91, 139, 250, 0.1);
        border-radius: 10rpx;
      }
    }
  }

  .Expensecontent {
    width: 702rpx;
    height: 196rpx;
    background: #dfe9ff;
    padding: 20rpx;
    border-radius: 20rpx;
    border: 2rpx solid;
    border-image: linear-gradient(180deg, rgba(81, 134, 208, 0.1), rgba(91, 139, 250, 0.2)) 2 2;
    margin: 20rpx auto;
    display: flex;
    align-items: center;
    color: black;
    font-size: 28rpx;
  }

  .point {
    margin: 0rpx 24rpx;
    display: flex;
    font-size: 22rpx;
    color: #aaa;

    .icon {
      width: 28rpx;
      height: 28rpx;
      background: #eb6559;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      margin-right: 12rpx;
    }

    .text {
      display: flex;

      .file {
        color: #fe9820;
      }
    }
  }
}

</style>
